<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>滚动条</title>
    <style>
        div {
            width: 400px;
            height: 500px;
            overflow-y: scroll;
        }

        li {
            line-height: 24px;
            font-size: 12px;
        }
    </style>
    <script>
        window.onload = function () {
            var oUl =document.getElementsByTagName("ul")[0];
            var oDiv =document.getElementsByTagName("div")[0];
            var oClik =document.getElementById("click");



            function scroll(){
                oDiv.scrollTop=parseInt(getComputedStyle(oUl).height);
            }
            scroll();

            oClik.onclick=function(){

                var oInp=document.getElementById("inp");
                var oText = oInp.value;
                var rand = "";
                for(var i = 0; i < 3; i++){
                    var r = Math.floor(Math.random() * 10);
                    rand += r;
                }

                oInp.value=rand;
                oUl.innerHTML+="<li>"+oText+"</li>";

                scroll();
            }
        }
    </script>
</head>
<body>
<div>
    <ul>
        <li>123</li>
        <li>324</li>
        <li>524</li>
    </ul>
</div>
<input type="text" value="345" id="inp">
<a href="javascript:" id="click">写入内容</a>
</body>
</html>